<template>
	<view class="container">
		<view class="MyInfo">
			<!-- picture [照片] -->
			<!-- <image src="/static/image/juxing.png" mode="center" class="picture"></image> -->
			<view class="userPicImg" @click="toModifyData()">
				<image :src="imgurlll" mode="scaleToFill"></image>
			</view>
			<view class="MyInfoText">
				<text class="MyInfoH1">{{hname}}</text>
				<!-- <view v-for="(list,index) in systemRole"> -->
				<text class="MyInfoH2">{{systemRole[0].name}}</text>
				<!-- </view> -->
				<!-- {{uerInfo.userName}} -->
			</view>
		</view>
		<!-- 修改密码 -->
		<view class="ChangePass" @click="openChangePass()">
			<view class="changepassImg Icon-size icon-rule"></view>
			<text>修改密码</text>
			<!-- <image class="moreIcon" src="/static/image/tiaozhuan.png" mode="aspectFit"></image> -->
			<image class="moreIcon" src="/static/image/tiaozhuan.png" mode="aspectFit"></image>
		</view>
		<!-- 查看版本号 -->
		<view class="ViewEdition" @click="ViewVersion">
			<view class="vieweditionImg Icon-size icon-rule"></view>
			<text>查看当前版本号</text>
			<!-- <text style="position: absolute;right: 50rpx;">检测到新版本</text> -->
			<image v-show="version_icon" src="/static/image/new.png" mode="aspectFill"
				style="position: absolute;right: 50rpx; height: 32rpx;width: 58rpx;"></image>
			<image class="moreIcon" src="/static/image/tiaozhuan.png" mode="aspectFit"></image>
		</view>
		<!-- 清除缓存 -->
		<view class="ClearCache" @click="ClearData">
			<view class="clearcacheImg Icon-size icon-rule"></view>
			<text>清除app缓存</text>
			<image class="moreIcon" src="/static/image/tiaozhuan.png" mode="aspectFit"></image>
		</view>
		<!-- 重启app -->
		<view class="RestartApp" @click="RestarApp">
			<view class="restarappImg Icon-size icon-rule"></view>
			<text>重启app</text>
			<image class="moreIcon" src="/static/image/tiaozhuan.png" mode="aspectFit"></image>
		</view>
		<!-- 查看帮助 -->
		<view class="ViewHelp" @click="toHelp()">
			<view class="viewhelpImg Icon-size icon-rule"></view>
			<text>查看使用帮助</text>
			<image class="moreIcon" src="/static/image/tiaozhuan.png" mode="aspectFit"></image>
		</view>
		<!-- android跳转-->
		<!-- <view class="ViewHelp" @click="goActivity">
			<view class="viewhelpImg Icon-size icon-rule"></view>
			<text>跳转到安卓原生activity（测试）</text>
			<image class="moreIcon" src="/static/image/tiaozhuan.png" mode="aspectFit"></image>
		</view>
		<view class="ViewHelp" @click="goTuya">
			<view class="viewhelpImg Icon-size icon-rule"></view>
			<text>涂鸦设备配网（测试-homeId:37790721）</text>
			<image class="moreIcon" src="/static/image/tiaozhuan.png" mode="aspectFit"></image>
		</view> -->
		<!-- 退出登录 -->
		<view class="ChangePass" @click="closeOutlog">
			<view class="outlogImg Icon-size icon-rule"></view>
			<text>退出登录</text>
			<image class="moreIcon" src="/static/image/tiaozhuan.png" mode="aspectFit"></image>
		</view>
		<!-- 提示框 -->
		<!-- 清除缓存 -->
		<view class="tips" v-show="!isShow">
			<view class="tips_Container">
				<image src="/static/image/ClearData_03.jpg" mode="center"></image>
				<text>是否清除缓存:<text style="color: #F43530;">{{fileSizeString}}</text>大小</text>
				<button type="default" @tap="clearStorage">确认清除</button>
			</view>
			<view class="Close_tips" @click="ClearData()">
				<view class="item" v-for="(value,index) in iconType" :key="index">
					<icon :type="value" size="42" />
				</view>
			</view>
		</view>
		<!-- 重启app -->
		<view class="retip" v-show="!reisShow">
			<view class="tips_Container">
				<image src="/static/image/restart.png" mode="center"></image>
				<text>是否重启app</text>
				<button type="default" @click="onAppRestart()">确认重启</button>
			</view>
			<view class="Close_tips" @click="RestarApp()">
				<view class="item" v-for="(value,index) in iconType" :key="index">
					<icon :type="value" size="42" />
				</view>
			</view>
		</view>
		<!-- 退出登陆 -->
		<view class="retip" v-show="!outisShow">
			<view class="tips_Container">
				<image src="/static/image/restart.png" mode="center"></image>
				<text>是否退出登陆</text>
				<button type="default" @click="doLogout()">确认退出</button>
			</view>
			<view class="Close_tips" @click="closeOutlog()">
				<view class="item" v-for="(value,index) in iconType" :key="index">
					<icon :type="value" size="42" />
				</view>
			</view>
		</view>
		<!-- 当前版本 -->
		<view class="retip" v-show="!versionisShow">
			<view class="tips_Container">
				<image src="/static/image/versionIcon.png"
					style="border-radius: 5%; box-shadow: #959595 0rpx 3rpx 3rpx; height: 250rpx; width: 250rpx;"
					mode="heightFix"></image>
				<text>颐养中心园区App</text>
				<text>
					V{{version}}
					<!-- 最新版本{{appConfig[1].appvalue}} -->
				</text>
				<button v-show="isDol" @click="doUpData()" type="default"
					style="margin: -30px 0 10px 0;line-height: 40rpx;height: 80rpx;">下载更新</button>
				<!-- <button type="default" @click="doLogout()">确认退出</button> -->
			</view>
			<view class="Close_tips" @click="closeVer()">
				<view class="item" v-for="(value,index) in iconType" :key="index">
					<icon :type="value" size="42" />
				</view>
			</view>
		</view>
		<app-update ref="app_update" :force="false" :tabbar="false"></app-update>
	</view>
</template>

<script>
	import appUpdate from "@/components/yzhua006-update/app-update"; //app更新组件
	// import {
	// 	mapState,
	// 	mapMutations
	// } from 'vuex';
	export default {
		// computed: mapState(['hasLogin', 'uerInfo']),
		data() {
			return {
				title: '我的',
				user: {}, //获取的客户信息
				isShow: true,
				reisShow: true,
				outisShow: true,
				versionisShow: true,
				isDol: false, //下载更新按钮
				version: '',
				hname: '',
				iconType: ['clear'],
				total: 0,
				fileSizeString: '',
				imgurlll: '',
				version_icon: false, //版本图标

				appConfig: [],
				systemRole: [],
			}
		},
		onShow() {
			this.getUser();
		},
		components: {
			appUpdate
		},
		mounted() {
			this.$refs.app_update.update(); //调用子组件检查更新方法
		},
		onLoad() {
			// console.log(uni.getStorageSync('systemRole'))
			this.systemRole = uni.getStorageSync('systemRole')

			this.appConfig = uni.getStorageSync('AppConfig')
			// console.log(this.appConfig)

			this.formatSize()
			// console.log(uni.getStorageSync('HC_name'))
			this.getName();
			// #ifdef APP-PLUS|| MP-WEIXIN

			this.iconType = [
				'clear'
			]
			// #endif
			// #ifdef MP-ALIPAY
			this.iconType = ['clear']
			// #endif
			// #ifdef MP-BAIDU
			this.iconType = ['clear']
			// #endif

			this.getPic()


			this.version = plus.runtime.version
			let me_version = this.version //当前版本
			let server_version = this.appConfig[1].appvalue //服务器储存版本

			// 获取版本
			if (me_version < server_version) {
				console.log("--私人版本小于服务器版本")
				this.version_icon = true
			} else if (me_version === server_version) {
				console.log("--私人版本等于服务器版本")
				this.version_icon = false
			} else {
				console.log("--私人版本大于服务器版本")
				this.version_icon = false
			}
		},
		methods: {
			toModifyData() {
				let loginName = uni.getStorageSync('loginName')
				uni.navigateTo({
					url: '/pages/user/ModifyData/identification/identification?imgurl=' + this.imgurlll +
						'&loginname=' + loginName + '&username=' + this.hname
				})
			},
			getPic() { //获取头像
				uni.request({
					url: 'https://api.btstu.cn/sjbz/api.php?lx=fengjing&format=json',
					success: (res) => {
						// console.log(res.data.imgurl);
						this.imgurlll = res.data.imgurl
						// this.text = 'request success';
					}
				})
			},
			// 官方下拉刷新
			onPullDownRefresh() {
				// console.log('refresh');
				setTimeout(function() {
					// uni.stopPullDownRefresh();
				}, 1000);
			},
			// ...mapMutations(['logout']),
			// bindlogin() {
			// 	if (this.hasLogin) {
			// 		this.logout()
			// 	} else {
			// 		uni.navigateTo({
			// 			url: '/pages/login/index'
			// 		})
			// 	}
			// },
			async news() {
				const res = await this.$myRequest({
					url: '/api-msg/messages/',
					method: "get",
					data: {
						isReaded: 0,
					}
				})
				if (res.success == true) {
					this.total = res.data.totalSize
					var quantity
					if (this.total == 0) {
						uni.removeTabBarBadge({
							index: 1,
						})
					} else if (this.total >= 99) {
						quantity = "99+"
					} else {
						quantity = this.total
						quantity = quantity.toString()
					}
					uni.setTabBarBadge({
						index: 1,
						text: quantity,
					})
				}
			},
			async getUser() { //读取客户信息
				//以下为订餐网站的测试接口。在没有正式接口以前先不要改动
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-portal/currentUser'
					})
				if (res.success == true) { //如果读取信息成功
					this.user = res.body.currentUser;
					this.news()
				} else if (res.success == false) { //如果读取信息成功
					uni.removeTabBarBadge({
						index: 1,
					})
				}
			},
			async doLogout() {
				const res = await this
					.$myRequest({
						url: '/api-portal/logout'
					})
				if (res.success == true) {
					//WebSocket关闭
					uni.closeSocket();
					uni.onSocketClose(function(res) {
						console.log('WebSocket 已关闭！');
					});
					//移除菜单权限
					uni.removeStorageSync('worker');
					uni.removeStorageSync('loginName')
					uni.removeStorageSync('id')
					uni.removeStorageSync('HC_name');
					uni.removeStorageSync('HC_pass');
					uni.removeStorageSync('nodekeyArr');
					// 缓存系统角色登记
					uni.removeStorageSync('systemRole');
					uni.clearStorageSync();

					//从涂鸦注销
					const userModule = uni.requireNativePlugin("LJY-UserModule") //调用android中自定义的插件名称
					//执行涂鸦智能注销，不关乎是否注销成功
					userModule.logout();
					uni.removeTabBarBadge({
						index: 1,
					})
					uni.redirectTo({ //关闭当前页面，跳转到应用内的某个页面。
						url: '/pages/user/login/index'
					})
				}
			},
			ClearData() {
				this.isShow = !this.isShow;
			},
			RestarApp() {
				this.reisShow = !this.reisShow;
			},
			closeOutlog() {
				this.outisShow = !this.outisShow;
			},
			closeVer() {
				this.versionisShow = !this.versionisShow;
			},
			ViewVersion() { //查看版本号点击事件
				this.version = plus.runtime.version
				// console.log(this.appConfig[1].appvalue) //远端版本
				// console.log(this.version) //当前版本
				console.log("plus.runtime.appid", plus.runtime.appid)

				let me_version = this.version //当前版本
				let server_version = this.appConfig[1].appvalue //服务器储存版本
				console.log("服务器储存版本", server_version)
				if (me_version < server_version) {
					console.log("私人版本小于服务器版本")
					this.$refs.app_update.update(); //调用子组件检查更新方法
					// this.versionisShow = !this.versionisShow;
					// this.versionisShow = !this.versionisShow;
					// this.isDol = false
				} else if (me_version === server_version) {
					console.log("私人版本等于服务器版本")
					this.versionisShow = !this.versionisShow;
					// this.$refs.app_update.update(); //调用子组件检查更新方法
					this.isDol = false
				} else {
					console.log("私人版本大于服务器版本")
					// this.$refs.app_update.update(); //调用子组件检查更新方法
					// this.isDol = true
					this.isDol = false
					this.versionisShow = !this.versionisShow;
				}

				// this.versionisShow = !this.versionisShow;
			},
			doUpData() {
				let fileName = this.appConfig[0].appvalue,
					serverAddress = 'http://pm.gxtimeloit.com:10031/static/apk/' 
				// this.$refs.app_update.update(); //调用子组件检查更新方法
			},
			openChangePass() {
				uni.navigateTo({
					url: '/pages/user/passwordEdit/index',
				});
			},
			toHelp() {
				uni.navigateTo({
					url: '/pages/user/help/help?username=' + this.hname + '&hImg=' + this.imgurlll
				})
			},
			toEdition() {
				uni.navigateTo({
					url: '/pages/user/ViewEditionPage/ViewEditionPage',
				});
			},
			async getName() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-portal/currentUser',
						method: "get",
					})
				// console.log(res)
				this.hname = res.body.currentUser.name

				// console.log(this.hname)

			},
			onAppRestart() { //重启APP，只有在真机情况下有用
				plus.runtime.restart();
			},
			goActivity() { //跳转到指定Activity
				//获取当前Activity  
				const main = plus.android.runtimeMainActivity();
				//通过反射获取Android的Intent对象
				const Intent = plus.android.importClass("android.content.Intent");
				//通过宿主上下文创建 intent
				const intent = new Intent(main.getIntent());
				//设置要开启的Activity包类路径  com.HBuilder.integrate.MainActivity换掉你自己的界面
				intent.setClassName(main, "io.dcloud.application.activity.MyActivity");
				//开启新的任务栈 （跨进程）
				intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
				//向原生界面传值操作
				intent.putExtra("uni_key", "来自uniapp的值");
				//开启新的界面
				//main.startActivity(intent);
				//请求码保证了，开始的新界面和返回的是同一个操作
				var CODE_REQUEST = 1000
				//采用startActivityForResult开启新的界面，当界面关闭时可以处理返回结果， CODE_REQUEST请求码是唯一标识
				main.startActivityForResult(intent, CODE_REQUEST);

				//设置原生界面返回后的回调操作
				main.onActivityResult = function(requestCode, resultCode, data) {
					if (requestCode == CODE_REQUEST) {
						console.log(requestCode); //这个是正确的 1000  
						console.log(resultCode); //始终都是0  
						console.log(data); //undefined   
						/* uni.redirectTo({ //关闭当前页面，跳转到应用内的某个页面。
							url: '/pages/user/login/index'
						}) */
					}

				}
			},
			goTuya() { //涂鸦智能测试
				uni.showLoading({
					title: '正在跳转到涂鸦官方配网界面'
				});
				let message = "";
				try {
					const deviceConfigModule = uni.requireNativePlugin("LJY-DeviceConfigModule") //调用android中自定义的插件名称
					//跳转到涂鸦智能配网UI
					const ret = deviceConfigModule.startDeviceActiveAction({ //login表示自定义插件的函数名，第一个表示要传递的参数
						homeId: "37790721"
					});
					uni.hideLoading(); //加载结束
					message = ret.msg;
				} catch (e) { //如果涂鸦智能无法连接
					uni.hideLoading(); //加载结束
					message = "跳转失败"
				}
				uni.showToast({
					title: message,
					mask: true,
					duration: 2000
				});
			},
			formatSize() { //计算缓存
				// this.fileSizeString = plus.cache.calculate
				// console.log(JSON.stringify(this.fileSizeString))
				let that = this;
				uni.getStorageInfo({
					success(res) {
						//console.log(res.keys);
						//console.log(res.limitSize);
						let size = res.currentSize;
						if (size < 1024) {
							that.fileSizeString = size + 'B';
						} else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
							that.fileSizeString = Math.floor(size / 1024 * 100) / 100 + 'KB';
						} else if (size / 1024 / 1024 >= 1) {
							that.fileSizeString = Math.floor(size / 1024 / 1024 * 100) / 100 + 'M';
						}
					}
				})
				// console.log(this.fileSizeString)
			},
			async clearStorage() {
				this.isShow = !this.isShow
				let that = this;
				uni.clearStorageSync();
				//重新获取并显示清除后的缓存大小
				that.formatSize();
				uni.showToast({
					title: '清除成功',
					icon: "none"
				})
				this.doLogout();
			},
			// 官方下拉刷新
			onPullDownRefresh() {
				// console.log('refresh');
				setTimeout(function() {
					// console.log("刷新")
					// uni.redirectTo({
					// 	url: '/pages/meterCheck/index'
					// })
					uni.stopPullDownRefresh();
				}, 1000);
			},

		}
	}
</script>

<style lang="less" scoped>
	// @import "~@/css/mixin.less";
	@import "~@/static/css/mixin.less";

	.icon-rule {
		width: 40rpx;
		height: 40rpx;
		background-repeat: no-repeat;
		background-position: center center;
	}


	.userPicImg {
		border-radius: 6px;
		width: 102rpx;
		height: 102rpx;
		margin: 0 26rpx 0 36rpx;
		background-repeat: no-repeat;
		background-size: 100%;
		// .userPic('userPicImg')

		image {
			border-radius: 6px;
			width: 102rpx;
			height: 102rpx;
		}
	}

	.outlogImg {
		.icon-OutLog('outlogImg');
	}

	.changepassImg {
		.icon-ChangePass('changepassImg');
	}

	.vieweditionImg {
		.icon-ViewEdition('vieweditionImg');
	}

	.clearcacheImg {
		.icon-ClearCache('clearcacheImg');
	}

	.restarappImg {
		.icon-RestartApp('restarappImg');
	}

	.viewhelpImg {
		.icon-ViewHelp('viewhelpImg');
	}


	.tips,
	.retip {
		background-color: rgba(0, 0, 0, 0.4);
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 5;
		top: 0;
		display: flex;
		flex-direction: column;

		align-items: center;
		justify-content: center;

		// animation: mymove 500ms;
		// transform: scale(1);

	}

	@keyframes mymove {
		0% {
			transform: translateY(-100px);
			/*开始为原始大小*/
		}

		100% {
			transform: translateY(0);
		}

	}

	@keyframes Opacity {
		0% {
			opacity: 0.1;
		}

		100% {
			opacity: 1.0;
		}
	}

	.tips_Container {
		width: 340px;
		height: 268px;
		background-color: #FFFFFF;
		position: relative;
		left: 0;
		right: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		flex-direction: column;

		font-weight: bold;

		margin-bottom: 25px;

		animation: Opacity 500ms;
		// transform: scale(1);

	}

	.tips_Container text {
		margin: 18px 0 34px 0;
	}

	.tips_Container image {
		margin-top: 35px;
		width: 96px;
		height: 96px;
	}

	.tips_Container button {
		background-color: #9AB0F0;
		width: 250px;
		height: 35px;
		line-height: 35px;
		border: 0;
		border-radius: unset;
		font-weight: 100;
		font-size: 16px;
		color: #FFFFFF;
	}

	@keyframes zy {
		10% {
			transform: rotate(15deg);
		}

		20% {
			transform: rotate(-10deg);
		}

		30% {
			transform: rotate(5deg);
		}

		40% {
			transform: rotate(-5deg);
		}

		50%,
		100% {
			transform: rotate(0deg);
		}
	}

	.Close_tips {
		background-color: #FFFFFF;
		border-radius: 50%;
		width: 50px;
		height: 50px;

		position: relative;
		left: 0;
		right: 0;
		z-index: -1;
		display: flex;
		flex-direction: column;

		align-items: center;
		justify-content: center;

		animation: mymove 500ms;
		// animation: zy 1s .15s linear infinite;
		// transform: scale(1);


		// overflow: hidden;
	}

	/* 	.Close_tips image {
		width: 20px;
		height: 20px;
	} */

	.MyInfo {
		height: 220rpx;
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-bottom: 16rpx;
	}

	.MyInfoText {
		display: flex;
		flex-direction: column;
	}

	.MyInfoH1 {
		font-weight: 600;
		font-size: 32rpx;
		color: #575757;
		margin-bottom: 8px;
	}

	.MyInfoH2 {
		font-size: 24rpx;
		color: #8b8b8b;
	}

	.picture {
		border-radius: 6px;
		width: 51px;
		height: 51px;
		margin: 0 26rpx 0 36rpx;
	}

	.ChangePass,
	.ViewEdition,
	.ClearCache,
	.RestartApp,
	.ViewHelp {
		height: 80rpx;
		width: 100%;
		background-color: #FFFFFF;
		margin-bottom: 16rpx;
		color: #565656;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.Icon-size {
		width: 40rpx;
		height: 40rpx;
		margin: 0 30rpx 0 30rpx;
	}

	.moreIcon {
		// border: 1px solid #FF0000;
		color: #BABABA;
		height: 80rpx;
		width: 30rpx;
		margin-right: 20rpx;
		position: absolute;
		right: 0;
	}
</style>
